<template>
  <div border-r dark:border-sakana-primary p-4 flex flex-col justify-between class="nav" dark:bg-sakana-nav>
    <div flex flex-col>
      <div relative self-center>
        <img src="/sakana.jpg" alt="" rounded-full w-20 h-20>
        <div absolute w-6 h-6 right-0 rounded-full bg-white bottom-0 />
        <div i-carbon:gender-female text-pink w-6 h-6 absolute bottom-0 right-0 rounded-full />
      </div>

      <!-- 简介 -->
      <div sm:px-4 gap-4 flex flex-col py-4 px-2>
        <div flex>
          林夕
        </div>
        <div>2001.05.30</div>
        <div flex items-center gap-2>
          <div i-mdi:zodiac-gemini />
          <p sm:block hidden>
            gemini
          </p>
        </div>
      </div>
      <!-- links -->
      <div sm:px-4 mt-6 px-2>
        <div text-xl flex gap-2 flex-col>
          <div btn-link hover="bg-black text-white" dark="hover:bg-white hover:text-black ">
            <a
              icon-btn
              i-carbon-logo-github
              rel="noreferrer"
              target="_blank"
              title="GitHub"
              href="https://github.com/maogonglinxi"
            />
            <p sm:block hidden>
              github
            </p>
          </div>
          <div btn-link hover="bg-bilibili" dark:text-white hover:text-white>
            <a icon-btn i-simple-icons:bilibili />
            <p sm:block hidden>
              bilibili
            </p>
          </div>
          <div btn-link hover="bg-qq" dark:text-white hover:text-white>
            <a icon-btn i-ant-design:qq-outlined />
            <p sm:block hidden>
              QQ
            </p>
          </div>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>
